<template>
  <el-card>
    <template #header>
      <h3>工作日历</h3>
    </template>
    <div style="text-align: right">
      <el-select v-model="year" @change="changeEvent">
        <el-option
          v-for="item in yearList"
          :key="item"
          :value="item"
          :label="item"
        />
      </el-select>
      <el-select v-model="month" @change="changeEvent">
        <el-option v-for="item in 12" :key="item" :label="item" :value="item" />
      </el-select>
    </div>
    <el-calendar :value="value">
      <template #dateCell="{ data }">
        <div>
          <span>{{ data.day.split('-')[2] }}</span>
          <span v-if="show(data)">休</span>
          <!-- <el-button @click="btnClick(date, data)">点击查看</el-button> -->
        </div>
      </template>
    </el-calendar>
  </el-card>
</template>
<script>
export default {
  props: {
    value: {
      type: Date,
      default: () => new Date()
    }
  },
  data() {
    return {
      year: '',
      month: '',
      yearList: []
    }
  },
  watch: {
    value: {
      handler(newVal) {
        this.month = newVal.getMonth() + 1
        // 当前年的前五年和后五年
        this.year = newVal.getFullYear()
        const min = this.year - 5
        const max = this.year + 5
        const arr = []
        for (let i = min; i <= max; i++) {
          arr.push(i)
        }
        this.yearList = arr
      },
      immediate: true
    }
  },
  methods: {
    show(data) {
      //   console.log(data)
      const t = new Date(data.day)
      const day = t.getDay()
      return data.type === 'current-month' && (day === 0 || day === 6)
    },
    changeEvent() {
      this.$emit('input', new Date(`${this.year}/${this.month}/01`))
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-calendar__header {
  display: none !important;
}
::v-deep .el-calendar-table td {
  border: none;
}
::v-deep .el-calendar-table tr td:first-child {
  border: none;
}
::v-deep .el-calendar-table tr:first-child td {
  border: none;
}
</style>
